<template>
  <div class="shop">
    <div class="you">
      <div><van-icon name="fire-o" /><span>有赞担保</span></div>
      <p class="gray">&gt;</p>
      <p class="gray">
        品质保证 · 退货包运费 · 免费上门取退 · 专属客服 · 先行赔付
      </p>
    </div>
    <div class="paiming">
     <div>
       <span><van-icon name="thumb-circle" /></span>
        <span>排行榜</span>
        <span>店铺商品热榜第<span style="color:red"> 2 </span>名</span>
     </div>
       <span class="gray" @click="fun()">&gt;</span>
    </div>
    <div class="yunfei">
      <div>
        <span class="gray">运费&nbsp;&nbsp;</span>
        <span>免运费</span>
      </div>
      <span class="gray">剩余&nbsp;37</span>
    </div>
    <div class="fuwu">
      <div class="one">
        <div>
          <span class="gray">服务&nbsp;&nbsp;</span>
          <span>收货后结算 · 快递发货</span>
        </div>
        <span class="gray">&gt;</span>
      </div>
      <div class="two">
        <div>
          <span class="gray">选择&nbsp;&nbsp;</span>
          <span>规格</span>
        </div>
        <span class="gray">&gt;</span>
      </div>
      <div class="three">
        <img src="../../../public/img/22.jpg"/>
        <img src="../../../public/img/33.jpg" />
        <span>共2种规格可选</span>
      </div>
    </div>
    <div class="home"></div>
    <div class="xiang"></div>
    
  </div>
</template>

<script>
export default {
  methods:{
   fun(){
       this.$router.push("/paiming")
   }
 }
};
</script>
<style scoped>
.paiming{
  display: flex;
  padding: .1rem;
 justify-content: space-between;
 font-size: .14rem;
}
.paiming div{
  width: 2rem;
   display: flex;
    justify-content: space-around;
}
.paiming div span:nth-child(2){
 font-weight: 600;
}
.shop {
  width: 100%;
  padding-bottom: .5rem;
}
.you {
  height: 0.6rem;
  margin: 0.1rem 0;
  padding: 0.1rem 0.1rem;
  display: flex;
  flex-direction: column;
  background-color: rgb(245, 243, 243);
}
.you div {
  color: rgb(80, 235, 33);
  font-size: 0.18rem;
  font-weight: 600;
}
.you :nth-child(2) {
  text-align: right;
  font-size: 0.16rem;
}
.gray {
  color: rgb(150, 150, 150);
  font-weight: 600;
}
.yunfei {
  height: 0.4rem;
  line-height: 0.4rem;
  display: flex;
  justify-content: space-between;
  background-color: rgb(245, 243, 243);
  margin: 0.1rem 0;
  padding: 0.1rem 0.1rem;
}
.fuwu {
  height: 1.2rem;
  background-color: rgb(245, 243, 243);
  margin: 0.1rem 0;
  padding: 0.1rem 0.1rem;
}
.one,
.two {
  display: flex;
  justify-content: space-between;
  height: 0.4rem;
  line-height: 0.4rem;
}
.three {
  height: 0.5rem;
  padding-left: 0.3rem;
}
.three img {
  width: 0.3rem;
  height: 0.3rem;
  vertical-align: middle;
  margin-right: 0.1rem;
}
.three span {
  display: inline-block;
  text-align: center;
  width: 1rem;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: rgb(214, 214, 214);
}
</style>